<template>
	<view class="m-loading-icon">
		<view class="m-loading-icon-strimg" :style="spanStyle" v-for="(item, index) in 6"></view>
	</view>
</template>

<script>
	export default {
		name: 'm-line',
		props: {
			iconColor: {
				type: String,
				default: '#CEBF7E',
			}
		},
		computed: {
			spanStyle() {
				const style = {}
				// style['--color'] = this.iconColor
				return style;
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 加载动画
	.m-loading-icon {
		position: relative;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;

		.m-loading-icon-strimg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 2px;
			height: 10px;
		}
	}

	.m-loading-icon-strimg:after {
		position: relative;
		top: 10rpx;
		content: '';
		display: block;
		height: 50%;
		border-radius: 2px;
		background-color: #999;
	}

	.m-loading-icon-strimg:before {
		position: relative;
		bottom: 10rpx;
		content: '';
		display: block;
		height: 50%;
		border-radius: 2px;
		background-color: #999;
	}

	.m-loading-icon-strimg:nth-child(2) {
		transform: rotate(30deg);
	}

	.m-loading-icon-strimg:nth-child(3) {
		transform: rotate(60deg);
	}

	.m-loading-icon-strimg:nth-child(4) {
		transform: rotate(90deg);
	}

	.m-loading-icon-strimg:nth-child(5) {
		transform: rotate(120deg);
	}

	.m-loading-icon-strimg:nth-child(6) {
		transform: rotate(150deg);
	}



	.m-loading-icon-strimg:nth-child(1):before {
		animation: load 1.0s linear 0s infinite;
	}

	.m-loading-icon-strimg:nth-child(2):before {
		animation: load 1.0s linear 0.1s infinite;
	}

	.m-loading-icon-strimg:nth-child(3):before {
		animation: load 1.0s linear 0.2s infinite;
	}

	.m-loading-icon-strimg:nth-child(4):before {
		animation: load 1.0s linear 0.3s infinite;
	}

	.m-loading-icon-strimg:nth-child(5):before {
		animation: load 1.0s linear 0.4s infinite;
	}

	.m-loading-icon-strimg:nth-child(6):before {
		animation: load 1.0s linear 0.5s infinite;
	}

	.m-loading-icon-strimg:nth-child(1):after {
		animation: load 1.0s linear 0.6s infinite;
	}

	.m-loading-icon-strimg:nth-child(2):after {
		animation: load 1.0s linear 0.7s infinite;
	}

	.m-loading-icon-strimg:nth-child(3):after {
		animation: load 1.0s linear 0.8s infinite;
	}

	.m-loading-icon-strimg:nth-child(4):after {
		animation: load 1.0s linear 0.9s infinite;
	}

	.m-loading-icon-strimg:nth-child(5):after {
		animation: load 1.0s linear 1s infinite;
	}

	.m-loading-icon-strimg:nth-child(6):after {
		animation: load 1.0s linear 1.1s infinite;
	}

	@keyframes load {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>
